<template>
  <div class="wrap">
    <img class="header" :src="product.applyHeadUrl" :alt="product.name" />
    <div class="product-info">
      <p class="text">最高额度可达(元)</p>
      <p class="money">{{ product.quota }}</p>
      <ul>
        <li class="van-hairline--right">快速放贷</li>
        <li class="van-hairline--right">利息低</li>
        <li>贷款期限长</li>
      </ul>
    </div>
    <div class="container">
      <ul class="apply-form">
        <li class="apply-option van-hairline--surround">
          <van-field v-model="nickname" type="text" placeholder="请输入申请人姓名" maxlength="10">
            <template slot="left-icon">
              <img class="icon" width="14" src="@assets/images/icon_user.png" alt="" />
            </template>
          </van-field>
        </li>
        <li class="apply-option van-hairline--surround" v-if="productId != 25">
          <van-field v-model="company" type="text" placeholder="请输入公司名" maxlength="30">
            <template slot="left-icon">
              <img class="icon" width="16" src="@assets/images/icon_company.png" alt="" />
            </template>
          </van-field>
        </li>
        <li class="apply-option van-hairline--surround">
          <van-field v-model="phone" type="tel" placeholder="请输入您的手机号码" maxlength="11">
            <template slot="left-icon">
              <img class="icon" width="12" src="@assets/images/icon_phone.png" alt="" />
            </template>
          </van-field>
        </li>
        <li class="apply-option van-hairline--surround">
          <van-field v-model.trim="smsCode" maxlength="6" type="number" placeholder="请输入验证码">
            <template slot="left-icon">
              <img class="icon" width="13" src="@assets/images/yzm.png" alt="" />
            </template>
            <template #button>
              <SmsBtn class="sms-btn van-hairline--left" color="#FE9100" plain size="small" :border="false" :phone="phone" />
            </template>
          </van-field>
        </li>
      </ul>
      <van-button class="submit-btn" type="info" block @click="apply" color="#FE9100" round>提 交</van-button>
    </div>
    <van-popup v-model="showTip" class="xyd-tip">
      <img width="200" src="https://tyqf-bucket.oss-cn-beijing.aliyuncs.com/product/xinyidai_applyCode.png" alt="" />
      <p>长按识别太阳码快速申请</p>
      <b>注意！！申请城市统一填写【湖北武汉】</b>
    </van-popup>
    <van-popup v-model="showImportantTip" class="xyd-tip">
      <h3>重要提示！</h3>
      <b>申请城市统一填写【湖北武汉】</b>
      <van-button color="#e94337" block round @click="showImportantTip = false">我知道了</van-button>
    </van-popup>
  </div>
</template>

<script>
import { Button, Field, Toast, Dialog, Popup } from 'vant';
import { product_getProductDetailNew, order_saveShareOrder } from '@api/service';
import SmsBtn from '@components/smsBtn';

export default {
  data() {
    return {
      showImportantTip: this.$route.query.id == 25 ? true : false,
      showTip: false,
      productId: this.$route.query.id,
      shareId: this.$route.query.shareId,
      product: {},
      phone: '',
      nickname: '',
      company: '',
      smsCode: ''
    };
  },
  mounted() {
    this.getProductDetail();
    this.phone = this.userInfo.phone;
    this.nickname = this.userInfo.nickname;
    this.company = this.userInfo.company;
  },
  methods: {
    async getProductDetail() {
      let res = await product_getProductDetailNew({ id: this.productId });
      if (res.code === 200) {
        let obj = {};
        res.data.attrList.forEach(todo => {
          obj[todo.key] = todo.value;
        });
        this.product = {
          ...res.data,
          ...obj
        };
      } else {
        Toast(res.message);
      }
    },
    async apply() {
      const { nickname, phone, company, smsCode, shareId, product, productId } = this;
      if (!nickname) {
        return Toast('请输入申请人姓名');
      } else if (!company && productId != 25) {
        return Toast('请输入公司名');
      } else if (!phone) {
        return Toast('请输入您的手机号');
      } else if (!/^1[3456789]\d{9}$/.test(phone)) {
        return Toast('请输入正确的手机号');
      } else if (!smsCode) {
        return Toast('请输入验证码');
      }
      let res = await order_saveShareOrder({ json: 1, shareId, smsCode, productId, phone, company, nickname });
      if (res.code === 200) {
        if (productId == 25) {
          this.showTip = true;
        } else {
          window.location.href = product.webUrl;
        }
        // if (product.secondCategory === 0) {
        //   Dialog.alert({
        //     title: '温馨提示',
        //     message: `信息提交成功， 我们的专属顾问会尽快和您取得联系。`,
        //     showConfirmButton: false,
        //     beforeClose: (action, done) => {
        //       done(false);
        //     }
        //   });
        // } else {
        // }
      } else {
        Toast(res.msg);
      }
    }
  },
  components: {
    'van-button': Button,
    'van-field': Field,
    'van-popup': Popup,
    SmsBtn
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  background: #fff;
}
.header {
  width: 100%;
  vertical-align: middle;
}
.container {
  overflow: hidden;
  width: 686px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  padding: 0 50px 25px;
  box-sizing: border-box;
}
.product-info {
  text-align: center;
  margin: 60px 0;
  .text {
    color: #292f3d;
    font-size: 28px;
  }
  .money {
    font-size: 68px;
    color: #f55519;
    margin: 25px 0 40px;
  }
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #596880;
    li {
      padding: 0 24px;
      text-align: center;
    }
  }
}
.apply-option {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  .van-cell {
    align-items: center;
  }
  .icon {
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
  &:last-child {
    margin-bottom: 50px;
  }
  &:after {
    border-radius: 88px;
    border-color: #dddddd;
  }
}
.sms-btn {
  font-size: 28px;
  margin-right: -24px;
}
.submit-btn {
  font-size: 32px;
  font-weight: bold;
}
.xyd-tip {
  width: 450px;
  padding: 30px 50px;
  font-size: 28px;
  line-height: 48px;
  border-radius: 10px;
  text-align: center;
  img {
    width: 400px;
    height: 400px;
  }
  p {
    font-size: 28px;
    font-weight: bold;
    color: #fe9100;
  }
}
</style>
